<template>
  <div class="container">
    <div class="logo">
      <image mode="aspectFill" :src="shop.logo || shopLogo" alt=""></image>
    </div>

    <div class="welcome">欢迎来到{{ shop.name || "" }}</div>

    <div class="tips">
      <p>请登录您的账号</p>
      <p>否则无法使用本系统</p>
    </div>

    <div class="btn" @click="fnJumpLogin">去登录</div>

    <image class="wave" mode="widthFix" :src="subImg" alt=""></image>
  </div>
</template>

<script>
import { getLocation } from "@/utils/maps";
import { mediaImage } from "@/utils/source";
// import { mapState } from "vuex";
import { createNamespacedHelpers } from "vuex";
const { mapState, mapActions } = createNamespacedHelpers("account");

export default {
  computed: {
    ...mapState(["shop"]),
  },
  data: () => {
    return {
      shopLogo: mediaImage("/static/images/logo-default.png"),
      subImg: mediaImage("/static/images/wave.png"),
    };
  },
  methods: {
    fnJumpLogin() {
      this.$Router.push({
        path: "/pages/login/index",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  position: relative;
  height: 100vh;
  background: linear-gradient(107.12deg, #58a5ff 0.9%, #1a66ff 99.34%);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 208rpx;
  overflow: hidden;
  .logo {
    display: flex;
    image {
      width: 132rpx;
      height: 132rpx;
      border-radius: 50%;
      border: 4rpx solid #fff;
    }
  }
  .welcome {
    @include font-24-34-bold;
    margin-top: 48rpx;
    color: #ffffff;
  }
  .tips {
    @include font-16-28;
    margin-top: 224rpx;
    text-align: center;
    color: #ffffff;
  }
  .btn {
    @include font-16-22;
    margin-top: 96rpx;
    background-color: #fff;
    width: calc(100% - 128rpx);
    height: 80rpx;
    border-radius: 40rpx;
    color: $color-primary;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
  }
  image.wave {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
  }
}
</style>
